<template>
  <div style="width: 100%; height: 100%">
    <el-steps direction="vertical" :active="1" space="140">
      <el-step v-for="(item, k) in dataList">
        <template slot="icon">
          <img
            :src="item.imgUrl"
            :style="{
              height: k == 0 ? '41px' : '27px',
              width: k == 0 ? '41px' : '27px',
            }"
          />
        </template>
        <template slot="title">
          <div style="color: #ffffff; font-weight: bold; font-size: 24px">
            {{ item.date }}
          </div>
        </template>
        <template slot="description">
          <div class="step-row">
            <div style="width: 100%; height: 100px" class="step_item">
              <div
                style="
                  width: 70%;
                  color: #ffffff;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  font-weight: bold;
                  font-size: 14px;
                "
              >
                <el-row>
                  <el-col :span="24" style="color: #66ffff; font-size: 16px">{{
                    item.hx
                  }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">{{ item.ch }}</el-col>
                  <el-col :span="12">{{ item.hz }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">{{ item.gz }}</el-col>
                  <el-col :span="12"></el-col>
                </el-row>
              </div>
              <div
                style="
                  width: 30%;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                "
              >
                <div style="font-size: 28px; color: #66ffff; line-height: 32px">
                  {{ item.gzf }}
                </div>
                <div style="font-size: 14px; color: #ffffff">
                  {{ item.unit }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>
<script>
export default {
  title: "roundBar",
  data() {
    return {
      dataList: [],
    };
  },
  props: {
    topVal: { type: String || Number, default: "30" },
    lineFlag: { type: String || Number, default: "10" },
    topNameFlag: { type: Boolean, default: false },
    topNameConfig: {
      type: Object,
      default: () => ({
        name: "1111",
        fontSize: "",
        color: "",
        top: "",
        left: "0%",
        right: "",
        bottom: "",
      }),
    },
  },
  mounted() {},
  created() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.top_title {
  background-image: url("~@/assets/images/jsgh/frame_hbyxqk@2x.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 5px 20px;
  width: 100%;
  text-align: center;
}
.step_item {
  display: flex;
  padding: 10px;
  background: linear-gradient(270deg, rgba(19, 49, 107, 0) 0%, #00246a 100%);
  border: 2px solid;
  border-image: linear-gradient(
      270deg,
      rgba(0, 80, 250, 0),
      rgba(28, 119, 255, 1)
    )
    2 2;
}
::v-deep .el-step__description {
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
}
.el-step__icon {
  background: rgba(0, 80, 250, 0);
}
.el-step__line {
  background: #2b72ff;
}
</style>
